﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机构设置</title>
    <!-- 引入样式 -->

    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        a {
            text-decoration: none; /* 去除下划线 */
        }
        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }

        .transfer-registration {
            padding: 10px;
        }

        .business-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .button-group {
            text-align: right;
            margin-bottom: 10px;
        }



        .form-table {
            width: 100%;
            border-collapse: collapse;
        }

            .form-table td {
                border: 1px solid #000;
                padding: 5px;
            }

        .label {
            background-color: #FFD553; /* 模拟表头黄色背景 */
            text-align: right;
            font-weight: bold;
        }

        .vertical-top {
            vertical-align: top;
        }

        input, select, textarea {
            width: 100%;
            box-sizing: border-box;
        }

            input[disabled], textarea[disabled] {
                background-color: #f0f0f0;
            }

    </style>

</head>
<body>

    <div class="transfer-registration">
        <!-- 业务标题 -->
        <div class="business-title">您正在做的业务是:人力资源--调动管理--调动登记</div>
        <!-- 操作按钮 -->
        <div class="button-group">
            <el-button type="primary" v-on:click="handleSubmit">提交</el-button>
            <el-button v-on:click="handleReturn">返回</el-button>
        </div>
        <!-- 主体表格 -->
        <form>


            <table class="form-table">
                <tr>
                    <td class="label">档案编号</td>
                    <td><el-input v-model="form.human_id"></el-input></td>
                    <td class="label">姓名</td>
                    <td><el-input v-model="form.human_name"></el-input></td>
                    <td class="label">原薪酬标准</td>
                    <td><el-input v-model="form.original.salaryStandardName" readonly></el-input></td>
                    <td class="label">原薪酬总额</td>
                    <td><el-input v-model="form.original.salarySum" readonly></el-input></td>
                </tr>
                <tr>
                    <td class="label">原一,二，三级机构</td>
                    <td colspan="4">

                        <el-cascader v-model="originalOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     disabled
                                     class="w-full">
                        </el-cascader>

                    </td>
                    <td class="label">原职位分类和原职位名称</td>
                    <td colspan="4">

                        <el-cascader v-model="originalJob"
                                     :options="jobOptions"
                                     :props="jobCascaderProps"
                                     disabled
                                     class="w-full">
                        </el-cascader>

                    </td>

                </tr>
                <tr>

                    <td class="label">新一,二，三级机构名称</td>
                    <td colspan="4">

                        <el-cascader v-model="selectedOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     placeholder="请选择机构"
                                     clearable
                                     v-on:change="handleOrgChange"
                                     class="w-full"
                                     style="width: 100%;">
                        </el-cascader>

                    </td>
                    <td class="label">新职位分类和新职位名称</td>
                    <td colspan="4">

                        <el-cascader v-model="selectedJob"
                                     :options="jobOptions"
                                     :props="jobCascaderProps"
                                     placeholder="请选择职位分类和职位"
                                     clearable
                                     v-on:change="handleJobChange"
                                     class="w-full"
                                     style="width: 100%;">
                        </el-cascader>

                    </td>
                </tr>
                <tr>

                    <td class="label">新薪酬标准</td>
                    <td>


                        <!-- 修改后 -->
                        <el-select v-model="form.new.salaryStandardId" placeholder="请选择新薪酬标准" v-on:change="handleSalaryChange">
                            <!-- :value绑定唯一编号（item.value），:label显示名称（不影响用户体验） -->
                            <el-option v-for="item in salaryStandards" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>

                    </td>
                    <td class="label">新薪酬总额</td>
                    <td> <el-input v-model="form.new.salaryTotal"> </el-input></td>
                    <td class="label">登记人</td>
                    <td><el-input v-model="form.registrant"></el-input></td>
                    <td class="label">登记时间</td>
                    <td>

                        <el-input type="text"
                                  v-model="form.registrationTime"
                                  placeholder="实时时间"
                                  readonly>

                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td class="label vertical-top">调动原因</td>
                    <td colspan="7">
                        <textarea v-model="form.transferReason" :rows="4"></textarea>
                    </td>
                </tr>


            </table>

        </form>
    </div>






    <script type="text/javascript">
               const { createApp, ref, onMounted, reactive } = Vue;
               const { ElMessage } = ElementPlus;

               const app = createApp({
                   setup() {

                      // 表单数据 - 重构为包含original和new对象
                       const form = reactive({
                           human_id: '',
                           human_name: '',
                           human_id_card: '',

                           // 原数据（从其他页面查询获取）
                           original: {
                               firstKindId: 0,
                               firstKindName: '',
                               secondKindId: 0,
                               secondKindName: '',
                               thirdKindId: 0,
                               thirdKindName: '',
                               jobCategoryId: 0, //原薪酬编号
                               jobCategoryName: '', //原薪酬名称
                               jobId: 0,
                               jobName: '',
                               salaryStandardId:'',
                               salaryStandardName: '',
                               salarySum: 0,
                           },

                           // 新数据（当前页面选择）
                           new: {
                               firstKindId: 0,
                               firstKindName: '',
                               secondKindId: 0,
                               secondKindName: '',
                               thirdKindId: 0,
                               thirdKindName: '',
                               jobCategoryId: 0,
                               jobCategoryName: '',
                               jobId: 0,
                               jobName: '',
                               salaryStandardId:'', //新薪酬编号
                               salaryStandard: '',  //新薪酬名称
                               salaryTotal: '',
                           },

                           // 其他信息
                           registrant: '',
                           registrationTime: '',
                           transferReason: '',
                       });

                         // 原机构级联选择相关
                       const originalOrg = ref([]);    // 原机构ID数组 [一级ID, 二级ID, 三级ID]

                         // 原职位级联选择相关
                       const originalJob = ref([]);    // 原职位ID数组 [分类ID, 职位ID]


                        // 机构选择相关
                        const selectedOrg = ref([]);  // 选中的机构ID数组
                        const orgOptions = ref([]);   // 级联选择器的选项数据


                        // 级联选择器配置
                        const cascaderProps = ref({
                            expandTrigger: 'click',
                            value: 'id',
                            label: 'name',
                            children: 'children',
                            checkStrictly: false
                        });

                        // 获取机构数据
                        const fetchOrgData = async () => {
                            try {
                                 const response = await axios.get('/FirstLevelCX');
                                 orgOptions.value = response.data;
                                 console.log('机构级联数据:', orgOptions.value);
                            } catch (error) {
                                console.error('获取机构数据失败:', error);
                                ElMessage.error('获取机构数据失败，请重试');
                            }
                        };

                        // 处理级联选择变化 - 新机构
                        const handleOrgChange = (value) => {
                           // 清空新机构名称和ID
                           form.new.firstKindName = form.new.secondKindName = form.new.thirdKindName = '';
                           form.new.firstKindId = form.new.secondKindId = form.new.thirdKindId = 0;

                           // 处理I级
                           if (value[0]) {
                               const firstNode = orgOptions.value.find(node => node.id === value[0]);
                               if (firstNode) {
                                   form.new.firstKindName = firstNode.name;
                                   form.new.firstKindId = value[0];

                                   // 处理II级
                                   if (value[1]) {
                                       const secondNode = firstNode.children.find(node => node.id === value[1]);
                                       if (secondNode) {
                                           form.new.secondKindName = secondNode.name;
                                           form.new.secondKindId = value[1];

                                           // 处理III级
                                           if (value[2]) {
                                               const thirdNode = secondNode.children.find(node => node.id === value[2]);
                                               form.new.thirdKindName = thirdNode?.name || '';
                                               form.new.thirdKindId = value[2];
                                           }
                                       }
                                   }
                               }
                           }
                       };

                           // 职位级联选择相关
                const selectedJob = ref([]);        // 选中的职位级联ID数组
                const jobOptions = ref([]);         // 职位级联选择器的选项数据
                const jobCascaderProps = ref({
                    expandTrigger: 'click',
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: false
                });

                // 获取职位级联数据
                const fetchJobData = async () => {
                    try {
                        const response = await axios.get('/JobCategoryCX');
                        jobOptions.value = response.data;
                        console.log('职位级联数据:', jobOptions.value);
                    } catch (error) {
                        console.error('获取职位数据失败:', error);
                        ElMessage.error('获取职位数据失败，请重试');
                    }
                };

                // 处理职位级联选择变化 - 新职位
                const handleJobChange = (value) => {
                    // 清空新职位名称和ID
                    form.new.jobCategoryName = form.new.jobName = '';
                    form.new.jobCategoryId = form.new.jobId = 0;

                    // 处理职位分类（第1级）
                    if (value[0]) {
                        const categoryNode = jobOptions.value.find(node => node.id === value[0]);
                        if (categoryNode) {
                            form.new.jobCategoryName = categoryNode.name;
                            form.new.jobCategoryId = value[0];

                            // 处理职位名称（第2级）
                            if (value[1]) {
                                const jobNode = categoryNode.children.find(node => node.id === value[1]);
                                form.new.jobName = jobNode?.name || '';
                                form.new.jobId = value[1];
                            }
                        }
                    }
                };

                // 从URL获取id
                const getUrlId = () => {
                    const urlParams = new URLSearchParams(window.location.search);
                    return urlParams.get('id');
                };

                // 根据id获取调动记录数据（原机构和原职位）
                const fetchOriginalData = async (id) => {
                    if (id) {
                        try {
                            const response = await axios.get(`/DDDJ/DJCX/?id=${id}`);
                            const data = response.data.data;

                            if (data) {
                                // 填充基础信息
                                form.human_id = data.human_id;
                                form.human_name = data.human_name;
                                form.human_id_card = data.id_card;
                                form.original.salaryStandardName = data.original_salary_standard;
                                form.original.salarySum = data.original_salary_total;
                                form.registrant = data.registrant || '';
                                form.transferReason = data.transferReason || '';
                                form.original.salaryStandardId=data.salayid;

                                // 填充原机构信息
                                if (data.original_first_kind_id && data.original_second_kind_id && data.original_third_kind_id) {
                                    originalOrg.value = [
                                        data.original_first_kind_id,
                                        data.original_second_kind_id,
                                        data.original_third_kind_id
                                    ];

                                    // 从级联数据中查找机构名称
                                    const firstNode = orgOptions.value.find(node => node.id === data.original_first_kind_id);
                                    if (firstNode) {
                                        form.original.firstKindName = firstNode.name;
                                        form.original.firstKindId = data.original_first_kind_id;

                                        const secondNode = firstNode.children.find(node => node.id === data.original_second_kind_id);
                                        if (secondNode) {
                                            form.original.secondKindName = secondNode.name;
                                            form.original.secondKindId = data.original_second_kind_id;

                                            const thirdNode = secondNode.children.find(node => node.id === data.original_third_kind_id);
                                            if (thirdNode) {
                                                form.original.thirdKindName = thirdNode.name;
                                                form.original.thirdKindId = data.original_third_kind_id;
                                            }
                                        }
                                    }
                                }

                                // 填充原职位信息
                                if (data.original_job_category_id && data.original_job_id) {
                                    originalJob.value = [
                                        data.original_job_category_id,
                                        data.original_job_id
                                    ];

                                     console.log('原职位分类ID:', data.original_job_category_id);
                                     console.log('原职位ID:', data.original_job_id);

                                     form.original.jobCategoryName =data.major_kind_name;
                                     form.original.jobCategoryId = data.original_job_category_id;

                                     form.original.jobName = data.major_name;
                                     form.original.jobId = data.original_job_id;

                                  

                                }



                            }
                        } catch (error) {
                            console.error('获取原数据失败:', error);
                            ElMessage.error('获取原数据失败，请重试');
                        }
                    }
                };

                // 返回上一页
                const handleReturn = () => {
                    window.location.href='/DDDJ/CXXS';
                };

                // 初始化时设置当前时间
                const updateTime = () => {
                    const now = new Date();
                    // 格式化时间为 YYYY-MM-DD HH:mm:ss
                    const formattedTime = now.toISOString().split('T')[0] + ' ' + now.toTimeString().split(' ')[0];
                    form.registrationTime = formattedTime;
                };

                // 薪酬标准选项
                const salaryStandards = ref([]);

                // 获取薪酬标准数据
                const fetchSalaryStandards = async () => {

                       //获取薪酬标准（有编号）
                          const salaryRes = await axios.get('/HRFR/GetSalaryStandardsED');
                          salaryStandards.value = salaryRes.data;


                          console.log('新薪酬值为',salaryRes.data);
                };

                // 提交表单
                const handleSubmit = async () => {
                    // 验证必填字段
                    // if (!form.human_id || !form.human_name) {
                    //     ElMessage.error('档案编号和姓名为必填项');
                    //     return;
                    // }

                    // 验证原数据是否存在
                    // if (!form.original.firstKindId || !form.original.jobCategoryId) {
                    //     ElMessage.error('原机构或原职位信息缺失，无法提交');
                    //     return;
                    // }

                    // 验证新数据是否选择
                    // if (!form.new.firstKindId || !form.new.jobCategoryId) {
                    //     ElMessage.error('请选择新机构和新职位');
                    //     return;
                    // }

                    const formattedRegTime = new Date().toISOString();

                    // 构造要提交的数据对象（包含原数据和新数据）
                    const submitData = {
                        // 基础信息
                        human_id: form.human_id,
                        human_name: form.human_name,
                        human_id_card: form.human_id_card,

                        // 原机构信息
                        first_kind_id: form.original.firstKindId,
                        first_kind_name: form.original.firstKindName,
                        second_kind_id: form.original.secondKindId,
                        second_kind_name: form.original.secondKindName,
                        third_kind_id: form.original.thirdKindId,
                        third_kind_name: form.original.thirdKindName,

                        // 原职位信息
                        major_kind_id: form.original.jobCategoryId,
                        major_kind_name: form.original.jobCategoryName,
                        major_id: form.original.jobId,
                        major_name: form.original.jobName,

                        // 新机构信息
                        new_first_kind_id: form.new.firstKindId,
                        new_first_kind_name: form.new.firstKindName,
                        new_second_kind_id: form.new.secondKindId,
                        new_second_kind_name: form.new.secondKindName,
                        new_third_kind_id: form.new.thirdKindId,
                        new_third_kind_name: form.new.thirdKindName,

                        // 新职位信息
                        new_major_kind_id: form.new.jobCategoryId,
                        new_major_kind_name: form.new.jobCategoryName,
                        new_major_id: form.new.jobId,
                        new_major_name: form.new.jobName,

                        // 薪酬信息
                        salary_standard_id: form.original.salaryStandardId,
                        salary_standard_name: form.original.salaryStandardName,
                        salary_sum: form.original.salarySum,

                        new_salary_standard_id: form.new.salaryStandardId,        // 新薪酬标准编号
                        new_salary_standard_name: form.new.salaryStandard,
                        new_salary_sum: form.new.salaryTotal,

                        // 登记信息
                        register: form.registrant ,
                        regist_time: formattedRegTime,


                        // 调动原因
                        change_reason: form.transferReason ,

                    };

                    console.log('提交的调动登记数据为:', submitData);

                    // 调用后端API添加数据
                    try {
                        const response = await axios.post('/DDDJ/AddDJ', submitData);

                        if (response.data.success) {
                            ElMessage.success('添加成功');
                            // 跳转到指定页面
                            window.location.href = '/DDSH/SHYM';
                        } else {
                            ElMessage.error(response.data.message || '添加失败');
                        }
                    } catch (error) {
                        console.error('提交失败:', error);
                        ElMessage.error('提交时发生错误，请联系系统管理员');
                    }
                };

                // 页面加载时执行
                onMounted(() => {
                    const id = getUrlId();
                    fetchOrgData();
                     fetchJobData();
                     fetchOriginalData(id);
                    fetchSalaryStandards();
                    updateTime();

                    // 每秒更新时间
                    setInterval(updateTime, 1000);
                });


             // 修改后：通过编号（item.value）匹配（唯一）
        const handleSalaryChange = (selectedId) => {
          // selectedId 是选中的薪酬标准编号（item.value，即:key绑定的唯一值）
          const matchedSalary = salaryStandards.value.find(item => item.value === selectedId);
          if (matchedSalary && matchedSalary.salarySum) {
            form.new.salaryTotal = matchedSalary.salarySum; // 填充对应的基本薪酬总额
            form.new.salaryStandard = matchedSalary.label; // 同步显示选中的名称（可选，用于表单显示）
          } else {
            form.salary_sum = '';
            form.new.salaryStandard = '';
          }
        };
        


                return {
                   form,
                   originalOrg,
                   originalJob,
                   selectedOrg,
                   selectedJob,
                   orgOptions,
                   jobOptions,
                   cascaderProps,
                   jobCascaderProps,
                   handleOrgChange,
                   handleJobChange,
                   handleReturn,
                   salaryStandards,
                   handleSubmit,
                   handleSalaryChange,
                };
            }
        });

        app.use(ElementPlus).mount('.transfer-registration');
    </script>

</body>
</html>  